<template>
    <div>
        <el-pagination v-model:current-page="state.page.pageNum" v-model:page-size="state.page.pageSize" :pager-count="5"
            :page-sizes="[10, 20, 30]" :total="state.page.total" layout="total, sizes, prev, pager, next, jumper"
            background @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange">
        </el-pagination>
    </div>
</template>

<script lang="ts" setup>
import {  reactive } from 'vue'
const state = reactive({
    page: {
        pageNum: 1,
        pageSize: 10,
        total: 0
    }
});

const onHandleSizeChange = (val: number) => {
    state.page.pageSize = val;
};
// 分页改变
const onHandleCurrentChange = (val: number) => {
    state.page.pageNum = val;
};
</script>

<style scoped></style>